<template>
  <div
    @click="handleClick"
    @contextmenu.prevent.stop="handleRightClick"
    @mousemove="handleMousemove"
    class="hyd_container"
  >
    <div class="top">
      <div class="sub-box">
        <User />
        <User text="FLT   CTRL" />
      </div>
      <div class="sub-box">
        <User text="NOSE GEAR & STEERING" />
      </div>
      <div class="sub-box">
        <User text="ALTN/RSV  BRAKES" />
      </div>
      <div class="sub-box">
        <User text="FLAPS" />
        <User text="MAIN GEAR & STEERING" />
      </div>
      <div class="sub-box">
        <User text="FLT   CTRL" />
      </div>
      <div class="sub-box">
        <User text="NORM BRKS" />
        <User text="R   REV" />
        <User text="FLT   CTRL" />
      </div>
    </div>
    <select
      v-model="selectValue"
      @change="handleChange"
      :style="selectStyle"
      id="myselect"
      class="hyd-selector"
    >
      <option v-for="option in options" :value="option">{{ option }}</option>
    </select>
    <canvas ref="canvasRef" width="634" height="300"></canvas>
    <div class="lower">
      <div class="left">
        <div
          :style="lEngPumpStyle"
          class="boxItem"
          style="margin-left: 20px; margin-top: 110px"
        ></div>
        <div :style="lEngPumpColor" class="disc_font" style="margin-left: 50px; margin-top: -15px">
          L<br />ENG
        </div>
        <div
          :style="lElecPumpStyle"
          class="boxItem"
          style="margin-left: 96px; margin-top: 40px"
        ></div>
        <div :style="lElecPumpColor" class="disc_font" style="margin-left: 50px; margin-top: -65px">
          L<br />ELEC
          <span style="margin-top: 5px; display: block; color: white">{{ lElecPump }}</span>
        </div>
        <div :style="sovStyle" class="sov" style="margin-left: 24px; margin-top: 5px"></div>
        <span
          :style="sovColor"
          style="margin-left: 58px; margin-top: -25px; display: block; font-weight: 600"
          >SOV</span
        >
      </div>
      <div class="center">
        <div class="center_0">
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-top: 19px;
              margin-left: 25px;
            "
          >
            <span style="display: block; color: rgb(8, 214, 255); font-weight: 600">ISLN</span>
            <div :style="islnStyle1" style="margin-top: -5px" class="sov"></div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              margin-top: 19px;
              margin-left: 25px;
            "
          >
            <span style="display: block; color: rgb(8, 214, 255); font-weight: 600">ISLN</span>
            <div :style="islnStyle2" style="margin-top: -5px" class="sov"></div>
          </div>
        </div>
        <div class="center_1">
          <div class="pump_disc">
            <span class="pump_disc_item1">P</span>
            <span class="pump_disc_item1">R</span>
            <span class="pump_disc_item1">I</span>
            <span class="pump_disc_item2">M</span>
            <span class="pump_disc_item1">A</span>
            <span class="pump_disc_item1">R</span>
            <span class="pump_disc_item1">Y</span>
          </div>
          <div
            class="boxItem"
            :style="c1ElecPumpStyle"
            style="margin-top: 90px; margin-left: 26px"
          ></div>
          <div
            :style="c1ElecPumpColor"
            class="disc_font"
            style="margin-left: -5px; margin-top: 115px"
          >
            ELEC<br />C1
          </div>
          <div
            :style="c2ElecPumpColor"
            class="disc_font"
            style="margin-left: 75px; margin-top: 115px"
          >
            ELEC<br />C2
          </div>
          <div
            class="boxItem"
            :style="c2ElecPumpStyle"
            style="margin-top: 90px; margin-left: -5.5px"
          ></div>
        </div>
        <div class="center_2">
          <div class="pump_disc2">
            <span class="pump_disc_item1">D</span>
            <span class="pump_disc_item1">E</span>
            <span class="pump_disc_item1">M</span>
            <span class="pump_disc_item1">A</span>
            <span class="pump_disc_item1">N</span>
            <span class="pump_disc_item1">D</span>
          </div>
          <div
            :style="c1AirPumpColor"
            class="disc_font"
            style="margin-left: 47px; margin-top: 15px"
          >
            AIR<br />C1
            <span style="margin-top: 5px; display: block; color: white; margin-left: -8px">{{
              c1AirPump
            }}</span>
          </div>
          <div
            :style="c1AirPumpStyle"
            class="boxItem"
            style="margin-left: -8px; margin-top: 30px"
          ></div>
          <div
            :style="c2AirPumpStyle"
            class="boxItem"
            style="margin-left: 33px; margin-top: 30px"
          ></div>
          <div
            :style="c2AirPumpColor"
            class="disc_font"
            style="margin-left: -8px; margin-top: 15px"
          >
            AIR<br />C2
            <span style="margin-top: 5px; display: block; color: white; margin-left: 8px">{{
              c2AirPump
            }}</span>
          </div>
          <div :style="ratPumpColor" class="disc_font" style="margin-top: 15px; margin-left: 4px">
            RAT
          </div>
          <div
            :style="ratPumpStyle"
            class="boxItem"
            style="margin-left: -13px; margin-top: -30px"
          ></div>
        </div>
      </div>
      <div class="right">
        <div
          :style="rEngPumpStyle"
          class="boxItem"
          style="margin-left: 66px; margin-top: 110px"
        ></div>
        <div :style="rEngPumpColor" class="disc_font" style="margin-left: 22px; margin-top: -18px">
          R<br />ENG
        </div>
        <div :style="rElecPumpColor" class="disc_font" style="margin-left: 22px; margin-top: 18px">
          R<br />ELEC
          <span style="margin-top: 5px; display: block; color: white">{{ rElecPump }}</span>
        </div>
        <div
          :style="rElecPumpStyle"
          class="boxItem"
          style="margin-left: -10px; margin-top: -27px"
        ></div>
        <div :style="sovStyle2" class="sov" style="margin-left: 70px; margin-top: -9px"></div>
        <span
          :style="sovColor"
          style="margin-left: 36px; margin-top: -25px; display: block; font-weight: 600"
          >SOV</span
        >
      </div>
    </div>
    <Press />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from 'vue'
import {
  drawArc,
  drawLine,
  drawTriangle,
  drawVerticalLine,
  drawHorizontalLine
} from '../../../utils/drawCanvas'
import { useStore } from 'vuex'
import User from './User.vue'
import Press from './Press.vue'

const store = useStore()

const canvasRef = ref(null)
const lEngPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px'
})
const lElecPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})
const lEngPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})
const rEngPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})
const rElecPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const lElecPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px',
  backgroundColor: 'rgb(0, 0, 0)'
})

const rEngPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px',
  backgroundColor: 'rgb(0, 0, 0)'
})
const rElecPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px',
  backgroundColor: 'rgb(0, 0, 0)'
})

const sovStyle = reactive({
  border: '2px solid rgb(8,255,66)',
  borderRadius: '100%'
})

const sovStyle2 = reactive({
  border: '2px solid rgb(8,255,66)',
  borderRadius: '100%'
})

const islnStyle1 = reactive({
  border: '2px solid rgb(8,255,66)',
  borderRadius: '100%'
})

const islnStyle2 = reactive({
  border: '2px solid rgb(8,255,66)',
  borderRadius: '100%'
})

const options = ref(['ON', 'OFF', 'AUTO'])

const selectStyle = reactive({
  backgroundColor: '#333',
  color: 'white',
  border: '1px solid #666',
  padding: '5px',
  cursor: 'pointer',
  zIndex: 3, // 确保在canvas上层
  position: 'absolute',
  display: 'none'
})

const sovColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const c1ElecPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px'
})

const c2ElecPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px'
})

const c1ElecPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const c2ElecPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const c1AirPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const c2AirPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const c1AirPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px'
})

const c2AirPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px'
})

const ratPumpStyle = reactive({
  border: '2px solid white',
  borderRadius: '1px'
})

const ratPumpColor = reactive({
  color: 'rgb(8, 214, 255)'
})

const selectValue = ref('ON')

const lEngPump = computed(() => store.getters['hyd/lEngPump'])
const rEngPump = computed(() => store.getters['hyd/rEngPump'])
const c1ElecPump = computed(() => store.getters['hyd/c1ElecPump'])
const c2ElecPump = computed(() => store.getters['hyd/c2ElecPump'])
const lElecPump = computed(() => store.getters['hyd/lElecPump'])
const c1AirPump = computed(() => store.getters['hyd/c1AirPump'])
const c2AirPump = computed(() => store.getters['hyd/c2AirPump'])
const rElecPump = computed(() => store.getters['hyd/rElecPump'])
const lPress = computed(() => store.getters['hyd/lPress'])
const rPress = computed(() => store.getters['hyd/rPress'])
const cPress = computed(() => store.getters['hyd/cPress'])
const ratPump = computed(() => store.getters['hyd/ratPump'])

let lPressDiff = 0
let rPressDiff = 0
let cPressDiff = 0

watch(
  [
    () => store.getters['hyd/lEngPump'],
    () => store.getters['hyd/rEngPump'],
    () => store.getters['hyd/c1ElecPump'],
    () => store.getters['hyd/c2ElecPump'],
    () => store.getters['hyd/lElecPump'],
    () => store.getters['hyd/c1AirPump'],
    () => store.getters['hyd/c2AirPump'],
    () => store.getters['hyd/rElecPump'],
    () => store.getters['hyd/lPress'],
    () => store.getters['hyd/rPress'],
    () => store.getters['hyd/cPress'],
    () => store.getters['hyd/ratPump']
  ],
  (newVal, oldVal) => {
    newVal.forEach((val, index) => {
      const getterNames = [
        'lEngPump',
        'rEngPump',
        'c1ElecPump',
        'c2ElecPump',
        'lElecPump',
        'c1AirPump',
        'c2AirPump',
        'rElecPump',
        'lPress',
        'rPress',
        'cPress',
        'ratPump'
      ]

      const getterName = getterNames[index]
      const oldValForGetter = oldVal[index]
      const newValForGetter = newVal[index]
      if (newValForGetter !== oldValForGetter) {
        switch (getterName) {
          case 'lEngPump':
            break
          case 'rEngPump':
            break
          case 'c1ElecPump':
            break
          case 'c2ElecPump':
            break
          case 'lElecPump':
            break
          case 'c1AirPump':
            break
          case 'c2AirPump':
            break
          case 'rElecPump':
            break
          case 'lPress':
            if (Math.abs(newValForGetter - 1350) >= 11) {
              if (newValForGetter - 1950 < 11 && newValForGetter - 1950 >= 0 && lElecPumpRun) {
                checkIfMultiPumpWork()
              }
              return
            }
            lPressDiff = newValForGetter - oldValForGetter
            break
          case 'rPress':
            if (Math.abs(newValForGetter - 1350) >= 11) {
              if (newValForGetter - 1950 < 11 && newValForGetter - 1950 >= 0 && rElecPumpRun) {
                checkIfMultiPumpWork()
              }
              return
            }
            rPressDiff = newValForGetter - oldValForGetter
            break
          case 'cPress':
            if (
              newValForGetter < 1350 &&
              1350 - newValForGetter > 11 &&
              1350 - newValForGetter <= 22
            ) {
              cPressDiff = newValForGetter - oldValForGetter
              checkCSysStaus()
            } else {
              if (
                newValForGetter - 1950 < 11 &&
                newValForGetter - 1950 >= 0 &&
                (c1AirPumpRun || c2AirPumpRun)
              ) {
                checkIfMultiPumpWork()
              }
              return
            }
            break
          case 'ratPump':
            break
          default:
            console.log('Unknown property change')
        }
        drawCanvas()
      }
    })
  }
)

const checkIfMultiPumpWork = () => {
  if ((c1AirPumpRun || c2AirPumpRun) && (c1ElecPump.value || c2ElecPump.value)) {
    if (c1AirPumpRun) {
      c1AirPumpRun = false
    }
    if (c2AirPumpRun) {
      c2AirPumpRun = false
    }
  }

  if (lElecPumpRun && lEngPump.value) {
    lElecPumpRun = false
  }
  if (rElecPumpRun && rEngPump.value) {
    rElecPumpRun = false
  }
  drawCanvas()
}

const checkCSysStaus = () => {
  if (ratPump.value) {
    if (
      c1AirPump.value == 'OFF' &&
      c2AirPump.value == 'OFF' &&
      !c1ElecPump.value &&
      !c2ElecPump.value
    ) {
      // console.log('冲压空气涡轮泵启动')
      ratPumpRun = true
    } else {
      ratPumpRun = false
    }
  }

  if (c1AirPump.value == 'ON') {
    c1AirPumpRun = true
  } else if (c1AirPump.value == 'OFF') {
    c1AirPumpRun = false
  } else {
    if (c1ElecPump.value || c2ElecPump.value) {
      if (cPressDiff == 0) {
        if (cPress.value > 1350) {
          c1AirPumpRun = false
        } else {
          c1AirPumpRun = true
        }
      } else {
        if (cPressDiff < 0) {
          c1AirPumpRun = true
        } else {
          c1AirPumpRun = false
        }
      }
    } else {
      c1AirPumpRun = true
    }
  }

  if (c2AirPump.value == 'ON') {
    c2AirPumpRun = true
  } else if (c2AirPump.value == 'OFF') {
    c2AirPumpRun = false
  } else {
    if (c1ElecPump.value || c2ElecPump.value) {
      if (cPressDiff == 0) {
        if (cPress.value > 1350) {
          c2AirPumpRun = false
        } else {
          c2AirPumpRun = true
        }
      } else {
        if (cPressDiff < 0) {
          c2AirPumpRun = true
        } else {
          c2AirPumpRun = false
        }
      }
    } else {
      c2AirPumpRun = true
    }
  }

  cPressDiff = 0
}

let ratPumpRun = false
let c1AirPumpRun = false
let c2AirPumpRun = false
let lElecPumpRun = false
let rElecPumpRun = false

const PI = Math.PI

onMounted(() => {
  drawCanvas()
})

const boxes = [
  { x: 17, y: 288, width: 70, height: 55 },
  { x: 57, y: 362, width: 75, height: 60 },
  { x: 542, y: 280, width: 70, height: 53 },
  { x: 498, y: 355, width: 77, height: 60 },
  { x: 182, y: 258, width: 70, height: 55 },
  { x: 343, y: 258, width: 70, height: 55 },
  { x: 210, y: 365, width: 77, height: 55 },
  { x: 309, y: 365, width: 70, height: 55 },
  { x: 400, y: 330, width: 65, height: 50 }
]

const handleRightClick = () => {
  selectStyle.display = 'none'
}

const handleMousemove = (event) => {
  const x = event.clientX
  const y = event.clientY
  // console.log(x, y)
  if (
    x >= boxes[0].x &&
    x <= boxes[0].x + boxes[0].width &&
    y >= boxes[0].y &&
    y <= boxes[0].y + boxes[0].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'lEngPump'
    lEngPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[1].x &&
    x <= boxes[1].x + boxes[1].width &&
    y >= boxes[1].y &&
    y <= boxes[1].y + boxes[1].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'lElecPump'
    lElecPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[2].x &&
    x <= boxes[2].x + boxes[2].width &&
    y >= boxes[2].y &&
    y <= boxes[2].y + boxes[2].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'rEngPump'
    rEngPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[3].x &&
    x <= boxes[3].x + boxes[3].width &&
    y >= boxes[3].y &&
    y <= boxes[3].y + boxes[3].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'rElecPump'
    rElecPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[4].x &&
    x <= boxes[4].x + boxes[4].width &&
    y >= boxes[4].y &&
    y <= boxes[4].y + boxes[4].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'c1ElecPump'
    c1ElecPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[5].x &&
    x <= boxes[5].x + boxes[5].width &&
    y >= boxes[5].y &&
    y <= boxes[5].y + boxes[5].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'c2ElecPump'
    c2ElecPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[6].x &&
    x <= boxes[6].x + boxes[6].width &&
    y >= boxes[6].y &&
    y <= boxes[6].y + boxes[6].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'c1AirPump'
    c1AirPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[7].x &&
    x <= boxes[7].x + boxes[7].width &&
    y >= boxes[7].y &&
    y <= boxes[7].y + boxes[7].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'c2AirPump'
    c2AirPumpColor.color = 'rgb(8,255,66)'
  } else if (
    x >= boxes[8].x &&
    x <= boxes[8].x + boxes[8].width &&
    y >= boxes[8].y &&
    y <= boxes[8].y + boxes[8].height
  ) {
    //设置Apu
    document.body.style.cursor = 'pointer'
    // 当鼠标点击时触发相应的方法
    clickItem = 'ratPump'
    ratPumpColor.color = 'rgb(8,255,66)'
  } else {
    document.body.style.cursor = 'default'
    if (clickItem) {
      switch (clickItem) {
        case 'lEngPump':
          lEngPumpColor.color = 'rgb(8,214,255)'
          break
        case 'lElecPump':
          lElecPumpColor.color = 'rgb(8,214,255)'
          break
        case 'rEngPump':
          rEngPumpColor.color = 'rgb(8,214,255)'
          break
        case 'rElecPump':
          rElecPumpColor.color = 'rgb(8,214,255)'
          break
        case 'c1ElecPump':
          c1ElecPumpColor.color = 'rgb(8,214,255)'
          break
        case 'c2ElecPump':
          c2ElecPumpColor.color = 'rgb(8,214,255)'
          break
        case 'c1AirPump':
          c1AirPumpColor.color = 'rgb(8,214,255)'
          break
        case 'c2AirPump':
          c2AirPumpColor.color = 'rgb(8,214,255)'
          break
        case 'ratPump':
          ratPumpColor.color = 'rgb(8,214,255)'
          break
        default:
          console.log('Unknown clickItem')
      }
    }
    clickItem = null
  }
}

const handleClick = (event) => {
  if (clickItem) {
    switch (clickItem) {
      case 'lEngPump':
        //设置lEngPump 状态
        store.dispatch('hyd/setLEngPump', !store.getters['hyd/lEngPump'])
        break
      case 'lElecPump':
        // 创建选择器
        createSelector(event, clickItem)
        break
      case 'rEngPump':
        store.dispatch('hyd/setREngPump', !store.getters['hyd/rEngPump'])
        break
      case 'rElecPump':
        createSelector(event, clickItem)
        break
      case 'c1ElecPump':
        store.dispatch('hyd/setC1ElecPump', !store.getters['hyd/c1ElecPump'])
        break
      case 'c2ElecPump':
        store.dispatch('hyd/setC2ElecPump', !store.getters['hyd/c2ElecPump'])
        break
      case 'c1AirPump':
        createSelector(event, clickItem)
        break
      case 'c2AirPump':
        createSelector(event, clickItem)
        break
      case 'ratPump':
        store.dispatch('hyd/setRatPump', !store.getters['hyd/ratPump'])
        break
      default:
        console.log('Unknown clickItem')
    }
  }
}

let width = 0
let height = 0
let clickItem = null
let selectorType = null

const createSelector = (event, clickItem) => {
  selectStyle.left = `${event.clientX}px`
  selectStyle.top = `${event.clientY - 20}px`
  switch (clickItem) {
    case 'lElecPump':
      selectValue.value = lElecPump.value
      break
    case 'rElecPump':
      selectValue.value = rElecPump.value
      break
    case 'c1AirPump':
      selectValue.value = c1AirPump.value
      break
    case 'c2AirPump':
      selectValue.value = c2AirPump.value
      break
    default:
      console.log('Unknown clickItem')
  }

  selectStyle.display = ''
  selectorType = clickItem
}

const handleChange = () => {
  if (selectorType == 'lElecPump') {
    store.dispatch('hyd/setLElecPump', selectValue.value)
  } else if (selectorType == 'rElecPump') {
    store.dispatch('hyd/setRElecPump', selectValue.value)
  } else if (selectorType == 'c1AirPump') {
    store.dispatch('hyd/setC1AirPump', selectValue.value)
  } else if (selectorType == 'c2AirPump') {
    store.dispatch('hyd/setC2AirPump', selectValue.value)
  }
  selectStyle.display = 'none'
}

const drawCanvas = () => {
  const canvas = canvasRef.value
  if (canvas.getContext) {
    const ctx = canvas.getContext('2d')
    width = canvas.width
    height = canvas.height
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    checkCSysStaus()
    drawLeftSystem(ctx)
    drawRightSystem(ctx)
    drawCenterSystem(ctx)
    drawSysLine(ctx)
  }
}

const drawSysLine = (ctx) => {
  if (c1AirPumpRun || c2AirPumpRun || c1ElecPump.value || c2ElecPump.value) {
    drawLine(
      ctx,
      width * 0.24,
      height * 0.25 - 5,
      width * 0.7,
      height * 0.25 - 5,
      10,
      'rgb(8, 255, 66)'
    )
    drawArc(
      ctx,
      width * 0.24,
      height * 0.25 - 10,
      5,
      0,
      1 * PI,
      false,
      null,
      null,
      'rgb(8, 255, 66)'
    )
    drawArc(
      ctx,
      width * 0.7,
      height * 0.25 - 10,
      5,
      0,
      1 * PI,
      false,
      null,
      null,
      'rgb(8, 255, 66)'
    )
    drawLine(
      ctx,
      width * 0.24 - 5,
      height * 0.25 - 10,
      width * 0.24 - 5,
      height * 0.08,
      10,
      'rgb(8, 255, 66)'
    )
    drawTriangle(ctx, width * 0.24 - 5, height * 0.08, 22, height * 0.05, 'rgb(8, 255, 66)')
    drawLine(
      ctx,
      width * 0.7 + 5,
      height * 0.25 - 10,
      width * 0.7 + 5,
      height * 0.08,
      10,
      'rgb(8, 255, 66)'
    )
    drawTriangle(ctx, width * 0.7 + 5, height * 0.08, 22, height * 0.05, 'rgb(8, 255, 66)')
    drawLine(
      ctx,
      width * 0.31 + 1,
      height * 0.25 - 5,
      width * 0.31 + 1,
      height * 0.12,
      10,
      'rgb(8, 255, 66)'
    )
    drawArc(ctx, width * 0.31 + 6, height * 0.12, 5, 0, 1 * PI, true, null, null, 'rgb(8, 255, 66)')
    drawLine(
      ctx,
      width * 0.31 + 6,
      height * 0.12 - 5,
      width * 0.42,
      height * 0.12 - 5,
      10,
      'rgb(8, 255, 66)'
    )
    drawArc(
      ctx,
      width * 0.42,
      height * 0.12 - 10,
      5,
      0,
      1 * PI,
      false,
      null,
      null,
      'rgb(8, 255, 66)'
    )
    drawLine(
      ctx,
      width * 0.42 + 5,
      height * 0.12 - 10,
      width * 0.42 + 5,
      height * 0.12 - 15,
      10,
      'rgb(8, 255, 66)'
    )
    drawTriangle(ctx, width * 0.42 + 5, height * 0.12 - 15, 22, height * 0.05, 'rgb(8, 255, 66)')
    drawLine(ctx, width * 0.58, height * 0.08, width * 0.58, height * 0.25, 10, 'rgb(8, 255, 66)')
    drawTriangle(ctx, width * 0.58, height * 0.08, 22, height * 0.05, 'rgb(8, 255, 66)')
    ctx.beginPath()
    ctx.moveTo(width * 0.65, height * 0.25 - 5 - 11)
    ctx.lineTo(width * 0.65, height * 0.25 - 5 + 11)
    ctx.lineTo(width * 0.65 + height * 0.05, height * 0.25 - 5)
    ctx.fillStyle = 'rgb(8, 255, 66)'
    ctx.fill()
    ctx.closePath()
  } else {
    drawHorizontalLine(
      ctx,
      width * 0.24 - 5,
      height * 0.25 - 5,
      width * 0.41 + 5,
      2,
      'rgb(255, 255, 255)'
    )
    drawArc(
      ctx,
      width * 0.24 - 4,
      height * 0.25 - 6,
      1,
      0,
      1 * PI,
      false,
      null,
      null,
      'rgb(255, 255, 255)'
    )
    drawVerticalLine(
      ctx,
      width * 0.24 - 5,
      height * 0.25 - 6,
      height * -0.17,
      2,
      'rgb(255, 255, 255)'
    )
    drawTriangle(ctx, width * 0.24 - 5, height * 0.08, 14, height * 0.05, 'rgb(255, 255, 255)')
    drawVerticalLine(
      ctx,
      width * 0.31 + 1.5,
      height * 0.25 - 5,
      height * -0.13,
      2,
      'rgb(255, 255, 255)'
    )
    drawArc(
      ctx,
      width * 0.31 + 2.5,
      height * 0.12 - 5,
      1,
      0,
      1 * PI,
      true,
      2,
      'rgb(255, 255, 255)',
      'rgb(255, 255, 255)'
    )
    drawHorizontalLine(
      ctx,
      width * 0.31 + 4,
      height * 0.12 - 6,
      width * 0.11 + 2,
      2,
      'rgb(255, 255, 255)'
    )
    drawArc(
      ctx,
      width * 0.42 + 6,
      height * 0.12 - 7,
      1,
      0,
      1 * PI,
      false,
      2,
      'rgb(255, 255, 255)',
      'rgb(255, 255, 255)'
    )
    drawVerticalLine(ctx, width * 0.42 + 7, height * 0.12 - 7, -10, 2, 'rgb(255, 255, 255)')
    drawTriangle(ctx, width * 0.42 + 7, height * 0.08 - 5, 14, height * 0.05, 'rgb(255, 255, 255)')
    drawLine(
      ctx,
      width * 0.58,
      height * 0.08,
      width * 0.58,
      height * 0.25 - 5,
      2,
      'rgb(255, 255, 255)'
    )
    // drawTriangle(ctx, width * 0.58, height * 0.08, 22, height * 0.05, 'rgb(8, 255, 66)')
    drawTriangle(ctx, width * 0.58, height * 0.08, 14, height * 0.05, 'rgb(255, 255, 255)')

    console.log(ratPumpRun, ratPump.value)

    if (ratPumpRun && ratPump.value) {
      drawVerticalLine(ctx, width * 0.71 - 1, height * 0.25, height * -0.17, 10, 'rgb(8, 255, 66)')
      drawHorizontalLine(ctx, width * 0.71 - 1, height * 0.25 - 5, -30, 'rgb(8, 255, 66)')
      ctx.beginPath()
      ctx.moveTo(width * 0.65, height * 0.25 - 5 - 11)
      ctx.lineTo(width * 0.65, height * 0.25 - 5 + 11)
      ctx.lineTo(width * 0.65 + height * 0.05, height * 0.25 - 5)
      ctx.fillStyle = 'rgb(255, 198, 41)'
      ctx.fill()
      ctx.closePath()
      drawTriangle(ctx, width * 0.71 - 1, height * 0.08, 22, height * 0.05, 'rgb(8, 255, 66)')
    } else {
      drawVerticalLine(
        ctx,
        width * 0.71 - 1.5,
        height * 0.23 + 1,
        height * -0.17 + 5,
        2,
        'rgb(255, 255, 255)'
      )
      drawHorizontalLine(ctx, width * 0.71 - 1, height * 0.25 - 5, -30, 'rgb(8, 255, 66)')
      ctx.beginPath()
      ctx.moveTo(width * 0.65, height * 0.25 - 5 - 7)
      ctx.lineTo(width * 0.65, height * 0.25 - 5 + 7)
      ctx.lineTo(width * 0.65 + height * 0.05, height * 0.25 - 5)
      ctx.fillStyle = 'rgb(255, 255, 255)'
      ctx.fill()
      ctx.closePath()
      drawTriangle(ctx, width * 0.71 - 1.5, height * 0.08, 14, height * 0.05, 'rgb(255, 255, 255)')
    }
  }
}

const drawLeftSystem = (ctx) => {
  let lPressNum = 0

  // Function to draw a line
  const drawLine = (startX, startY, endX, endY, lineWidth, strokeStyle) => {
    if (endY == 70 && lineWidth == 10) {
      lPressNum++
    }

    ctx.beginPath()
    ctx.moveTo(startX, startY)
    ctx.lineTo(endX, endY)
    ctx.lineWidth = lineWidth
    ctx.strokeStyle = strokeStyle
    ctx.stroke()
    ctx.closePath()
  }

  // Function to set styles
  const setStyles = (border, borderRadius) => {
    lEngPumpStyle.border = border
    lEngPumpStyle.borderRadius = borderRadius
  }

  if (lEngPump.value) {
    drawLine(width * 0.06, height * 0.25, width * 0.06, height * 1, 10, 'rgb(8, 255, 66)')
    drawLine(
      width * 0.06 + 5,
      height * 0.25 - 5,
      width * 0.12 - 5,
      height * 0.25 - 5,
      10,
      'rgb(8, 255, 66)'
    )
    drawArc(ctx, width * 0.06 + 5, height * 0.25, 5, PI, 1.5 * PI, false, 10, 'rgb(8, 255, 66)')
    drawArc(
      ctx,
      width * 0.12 - 5,
      height * 0.25 - 10,
      5,
      PI,
      0,
      true,
      10,
      'rgb(8, 255, 66)',
      'rgb(8, 255, 66)'
    )
    setStyles('4px solid rgb(8, 255, 66)', '2px')
  } else {
    drawLine(width * 0.06, height * 0.25 - 5, width * 0.06, height * 0.37, 2, 'white')
    drawLine(width * 0.06, height * 0.5, width * 0.06, height * 1, 2, 'white')
    drawLine(width * 0.06 + 1, height * 0.25 - 6, width * 0.12, height * 0.25 - 6, 2, 'white')
    drawArc(ctx, width * 0.06 + 1, height * 0.25 - 5, 1, PI, 1.5 * PI, false, 2, 'white', 'white')
    setStyles('2px solid white', '1px')
  }

  if (lElecPump.value == 'OFF') {
    drawLine(width * 0.18, height * 0.25 - 5, width * 0.18, height * 0.69, 2, 'white')
    drawLine(width * 0.18, height * 0.82, width * 0.18, height * 1, 2, 'white')
    drawLine(width * 0.12, height * 0.25 - 6, width * 0.18 - 1, height * 0.25 - 6, 2, 'white')
    drawArc(ctx, width * 0.18 - 1, height * 0.25 - 5, 1, 0, PI, true, 2, 'white', 'white')
    lElecPumpStyle.border = '2px solid white'
    lElecPumpStyle.borderRadius = '1px'
    lElecPumpRun = false
  } else if (lElecPump.value == 'ON') {
    drawLine(width * 0.18, height * 0.25, width * 0.18, height * 1, 10, 'rgb(8, 255, 66)')
    drawLine(
      width * 0.18 - 5,
      height * 0.25 - 5,
      width * 0.12 + 5,
      height * 0.25 - 5,
      10,
      'rgb(8, 255, 66)'
    )
    drawArc(ctx, width * 0.18 - 5, height * 0.25, 5, PI, 2 * PI, false, 10, 'rgb(8, 255, 66)')
    drawArc(
      ctx,
      width * 0.12 + 5,
      height * 0.25 - 10,
      5,
      PI,
      2 * PI,
      true,
      10,
      'rgb(8, 255, 66)',
      'rgb(8, 255, 66)'
    )
    lElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
    lElecPumpStyle.borderRadius = '2px'
    lElecPumpRun = true
  } else if (lElecPump.value == 'AUTO') {
    if (!lEngPump.value) {
      drawLine(width * 0.18, height * 0.25, width * 0.18, height * 1, 10, 'rgb(8, 255, 66)')
      drawLine(
        width * 0.18 - 5,
        height * 0.25 - 5,
        width * 0.12 + 5,
        height * 0.25 - 5,
        10,
        'rgb(8, 255, 66)'
      )
      drawArc(ctx, width * 0.18 - 5, height * 0.25, 5, PI, 2 * PI, false, 10, 'rgb(8, 255, 66)')
      drawArc(
        ctx,
        width * 0.12 + 5,
        height * 0.25 - 10,
        5,
        PI,
        2 * PI,
        true,
        10,
        'rgb(8, 255, 66)',
        'rgb(8, 255, 66)'
      )
      lElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
      lElecPumpStyle.borderRadius = '2px'
      lElecPumpRun = true
    } else {
      if (lPressDiff > 0) {
        drawLine(width * 0.18, height * 0.25 - 5, width * 0.18, height * 0.69, 2, 'white')
        drawLine(width * 0.18, height * 0.82, width * 0.18, height * 1, 2, 'white')
        drawLine(width * 0.12, height * 0.25 - 6, width * 0.18 - 1, height * 0.25 - 6, 2, 'white')
        drawArc(ctx, width * 0.18 - 1, height * 0.25 - 5, 1, 0, PI, true, 2, 'white', 'white')
        lElecPumpStyle.border = '2px solid white'
        lElecPumpStyle.borderRadius = '1px'
        lElecPumpRun = false
      } else if (lPressDiff < 0) {
        drawLine(width * 0.18, height * 0.25, width * 0.18, height * 1, 10, 'rgb(8, 255, 66)')
        drawLine(
          width * 0.18 - 5,
          height * 0.25 - 5,
          width * 0.12 + 5,
          height * 0.25 - 5,
          10,
          'rgb(8, 255, 66)'
        )
        drawArc(ctx, width * 0.18 - 5, height * 0.25, 5, PI, 2 * PI, false, 10, 'rgb(8, 255, 66)')
        drawArc(
          ctx,
          width * 0.12 + 5,
          height * 0.25 - 10,
          5,
          PI,
          2 * PI,
          true,
          10,
          'rgb(8, 255, 66)',
          'rgb(8, 255, 66)'
        )
        lElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
        lElecPumpStyle.borderRadius = '2px'
        lElecPumpRun = true
      } else {
        if (lPress.value < 1350) {
          drawLine(width * 0.18, height * 0.25, width * 0.18, height * 1, 10, 'rgb(8, 255, 66)')
          drawLine(
            width * 0.18 - 5,
            height * 0.25 - 5,
            width * 0.12 + 5,
            height * 0.25 - 5,
            10,
            'rgb(8, 255, 66)'
          )
          drawArc(ctx, width * 0.18 - 5, height * 0.25, 5, PI, 2 * PI, false, 10, 'rgb(8, 255, 66)')
          drawArc(
            ctx,
            width * 0.12 + 5,
            height * 0.25 - 10,
            5,
            PI,
            2 * PI,
            true,
            10,
            'rgb(8, 255, 66)',
            'rgb(8, 255, 66)'
          )
          lElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
          lElecPumpStyle.borderRadius = '2px'
          lElecPumpRun = true
        } else {
          drawLine(width * 0.18, height * 0.25 - 5, width * 0.18, height * 0.69, 2, 'white')
          drawLine(width * 0.18, height * 0.82, width * 0.18, height * 1, 2, 'white')
          drawLine(width * 0.12, height * 0.25 - 6, width * 0.18 - 1, height * 0.25 - 6, 2, 'white')
          drawArc(ctx, width * 0.18 - 1, height * 0.25 - 5, 1, 0, PI, true, 2, 'white', 'white')
          lElecPumpStyle.border = '2px solid white'
          lElecPumpStyle.borderRadius = '1px'
          lElecPumpRun = false
        }
      }
    }
  }
  if (lPressNum == 2 || lPressNum == 1) {
    //画到系统的管路
    ctx.beginPath()
    ctx.moveTo(width * 0.12, lPressNum == 2 ? height * 0.25 : height * 0.25 - 5)
    ctx.lineTo(width * 0.12, height * 0.08)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.12 - 11, height * 0.08)
    ctx.lineTo(width * 0.12 + 11, height * 0.08)
    ctx.lineTo(width * 0.12, height * 0.03)
    ctx.fillStyle = 'rgb(8, 255, 66)'
    ctx.fill()
    ctx.closePath()
    store.dispatch('hyd/increaseLPress')
  } else {
    ctx.beginPath()
    ctx.moveTo(width * 0.12, height * 0.25 - 5)
    ctx.lineTo(width * 0.12, height * 0.08)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.12 - 7, height * 0.08)
    ctx.lineTo(width * 0.12 + 7, height * 0.08)
    ctx.lineTo(width * 0.12, height * 0.04)
    ctx.fillStyle = 'rgb(255, 255, 255)'
    ctx.fill()
    ctx.closePath()
    store.dispatch('hyd/decreaseLPress')
  }
  lPressDiff = 0
}

const setREngPumpTrue = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(width * 0.94, height * 0.25)
  ctx.lineTo(width * 0.94, height * 1)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.94 - 5, height * 0.25 - 5)
  ctx.lineTo(width * 0.88 + 5, height * 0.25 - 5)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.94 - 5, height * 0.25, 5, PI, 2 * PI, false)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.88 + 5, height * 0.25 - 10, 5, PI, 2 * PI, true)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  rEngPumpStyle.border = '4px solid rgb(8, 255, 66)'
  rEngPumpStyle.borderRadius = '2px'
  rPressNum++
}

const setREngPumpFalse = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(width * 0.94, height * 0.25 - 5)
  ctx.lineTo(width * 0.94, height * 0.37)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.94, height * 0.5)
  ctx.lineTo(width * 0.94, height * 1)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.94 - 1, height * 0.25 - 5, 1, 0, PI, true)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.94, height * 0.25 - 6)
  ctx.lineTo(width * 0.88 - 3, height * 0.25 - 6)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  rEngPumpStyle.border = '2px solid white'
  rEngPumpStyle.borderRadius = '1px'
}

const setRElecPumpTrue = (ctx) => {
  rPressNum++
  ctx.beginPath()
  ctx.moveTo(width * 0.82, height * 0.25)
  ctx.lineTo(width * 0.82, height * 1)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.82 + 5, height * 0.25, 5, PI, 0, false)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.82 + 5, height * 0.25 - 5)
  ctx.lineTo(width * 0.88 - 5, height * 0.25 - 5)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.88 - 5, height * 0.25 - 10, 5, 0, PI, false)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  rElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
  rElecPumpStyle.borderRadius = '2px'
  rElecPumpRun = true
}

const setRElecPumpFalse = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(width * 0.82, height * 0.25 - 5)
  ctx.lineTo(width * 0.82, height * 0.7)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.82, height * 0.82)
  ctx.lineTo(width * 0.82, height * 1)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.82 + 1, height * 0.25 - 5, 1, 0, PI, true)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.82, height * 0.25 - 6)
  ctx.lineTo(width * 0.88 - 3, height * 0.25 - 6)
  ctx.strokeStyle = 'white'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  rElecPumpStyle.border = '2px solid white'
  rElecPumpStyle.borderRadius = '1px'
  rElecPumpRun = false
}

let rPressNum = 0

const drawRightSystem = (ctx) => {
  rPressNum = 0
  if (rEngPump.value) {
    setREngPumpTrue(ctx)
  } else {
    setREngPumpFalse(ctx)
  }
  if (rElecPump.value == 'ON') {
    setRElecPumpTrue(ctx)
  } else if (rElecPump.value == 'OFF') {
    setRElecPumpFalse(ctx)
  } else if (rElecPump.value == 'AUTO') {
    if (!rEngPump.value) {
      setRElecPumpTrue(ctx)
    } else {
      if (rPressDiff == 0) {
        if (rPress.value < 1350) {
          setRElecPumpTrue(ctx)
        } else {
          setRElecPumpFalse(ctx)
        }
      } else {
        if (rPressDiff > 0) {
          setRElecPumpFalse(ctx)
        } else {
          setRElecPumpTrue(ctx)
        }
      }
    }
  }
  if (rPressNum == 2 || rPressNum == 1) {
    ctx.beginPath()
    ctx.moveTo(width * 0.88, rPressNum == 2 ? height * 0.25 : height * 0.25 - 5)
    ctx.lineTo(width * 0.88, height * 0.08)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.88 - 11, height * 0.08)
    ctx.lineTo(width * 0.88 + 11, height * 0.08)
    ctx.lineTo(width * 0.88, height * 0.03)
    ctx.fillStyle = 'rgb(8, 255, 66)'
    ctx.fill()
    ctx.closePath()
    store.dispatch('hyd/increaseRPress')
  } else {
    ctx.beginPath()
    ctx.moveTo(width * 0.88, height * 0.25 - 5)
    ctx.lineTo(width * 0.88, height * 0.08)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.88 - 7, height * 0.08)
    ctx.lineTo(width * 0.88 + 7, height * 0.08)
    ctx.lineTo(width * 0.88, height * 0.04)
    ctx.fillStyle = 'rgb(255, 255, 255)'
    ctx.fill()
    ctx.closePath()
    store.dispatch('hyd/decreaseRPress')
  }
  rPressDiff = 0
}

const drawC1ElecPump = (ctx) => {
  if (c1ElecPump.value) {
    ctx.beginPath()
    ctx.moveTo(width * 0.42, height * 0.95)
    ctx.lineTo(width * 0.42, height * 1)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(width * 0.42 - 5, height * 0.95, 5, 1.5 * PI, 2 * PI, false)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.42 - 5, height * 0.95 - 5)
    ctx.lineTo(width * 0.32, height * 0.95 - 5)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(width * 0.32, height * 0.95 - 10, 5, PI, 2 * PI, true)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.32 - 5, height * 0.95 - 10)
    ctx.lineTo(width * 0.32 - 5, height * 0.25)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    c1ElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
    c1ElecPumpStyle.borderRadius = '2px'
    store.dispatch('hyd/increaseCPress')
  } else {
    ctx.beginPath()
    ctx.moveTo(width * 0.42, height * 0.95 - 4)
    ctx.lineTo(width * 0.42, height * 1)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(width * 0.42 - 1, height * 0.95 - 4, 2, 1 * PI, 2 * PI, false)
    ctx.fillStyle = 'rgb(255, 255, 255)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.42 - 1, height * 0.95 - 5)
    ctx.lineTo(width * 0.32 - 4, height * 0.95 - 5)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(width * 0.32 - 4, height * 0.95 - 6, 2, PI, 2 * PI, true)
    ctx.fillStyle = 'rgb(255, 255, 255)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.32 - 5, height * 0.95 - 6)
    ctx.lineTo(width * 0.32 - 5, height * 0.43)
    ctx.moveTo(width * 0.32 - 5, height * 0.3)
    ctx.lineTo(width * 0.32 - 5, height * 0.25 - 5)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    c1ElecPumpStyle.border = '2px solid white'
    c1ElecPumpStyle.borderRadius = '1px'
  }
}

const drawC2ElecPump = (ctx) => {
  if (c2ElecPump.value) {
    ctx.beginPath()
    ctx.arc(width * 0.56 + 5, height * 0.9, 10, PI, 0, false)
    ctx.fillStyle = 'rgb(8, 255, 66)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.56 + 5, height * 0.9 - 5)
    ctx.lineTo(width * 0.62, height * 0.9 - 5)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    ctx.beginPath()
    ctx.arc(width * 0.62, height * 0.9 - 10, 10, PI, 0, true)
    ctx.fillStyle = 'rgb(8, 255, 66)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.62 + 5, height * 0.9 - 10)
    ctx.lineTo(width * 0.62 + 5, height * 0.25)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
    c2ElecPumpStyle.border = '4px solid rgb(8, 255, 66)'
    c2ElecPumpStyle.borderRadius = '2px'
    store.dispatch('hyd/increaseCPress')
  } else {
    if (c1AirPump.value == 'ON' || c2AirPump.value == 'ON') {
      ctx.beginPath()
      ctx.moveTo(width * 0.56 + 2, height * 0.9 - 6)
      ctx.lineTo(width * 0.62 + 4, height * 0.9 - 6)
      ctx.strokeStyle = 'rgb(255, 255, 255)'
      ctx.lineWidth = 2
      ctx.stroke()
      ctx.closePath()
    } else {
      ctx.beginPath()
      ctx.moveTo(width * 0.56, height * 0.9 - 6)
      ctx.lineTo(width * 0.62 + 4, height * 0.9 - 6)
      ctx.strokeStyle = 'rgb(255, 255, 255)'
      ctx.lineWidth = 2
      ctx.stroke()
      ctx.closePath()
    }
    ctx.beginPath()
    ctx.arc(width * 0.62 + 4, height * 0.9 - 7, 2, 1 * PI, 0, true)
    ctx.fillStyle = 'rgb(255, 255, 255)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.62 + 5, height * 0.9 - 7)
    ctx.lineTo(width * 0.62 + 5, height * 0.43)
    ctx.moveTo(width * 0.62 + 5, height * 0.3)
    ctx.lineTo(width * 0.62 + 5, height * 0.25 - 5)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    c2ElecPumpStyle.border = '2px solid white'
    c2ElecPumpStyle.borderRadius = '1px'
  }
}

const startC1AirPump = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(width * 0.52 + 6, height * 0.9 - 5)
  ctx.lineTo(width * 0.42, height * 0.9 - 5)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.42, height * 0.9 - 10, 10, 1 * PI, 0, true)
  ctx.fillStyle = 'rgb(8, 255, 66)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.42 - 5, height * 0.9 - 10)
  ctx.lineTo(width * 0.42 - 5, height * 0.25)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  c1AirPumpStyle.border = '4px solid rgb(8, 255, 66)'
  c1AirPumpStyle.borderRadius = '2px'
  store.dispatch('hyd/increaseCPress')
}

const stopC1AirPump = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(width * 0.52 - 1, height * 0.9 - 6)
  ctx.lineTo(width * 0.42 - 3 - 1, height * 0.9 - 6)
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.42 - 3 - 1, height * 0.9 - 7, 2, 1 * PI, 0, true)
  ctx.fillStyle = 'rgb(255, 255, 255)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.42 - 3 - 2, height * 0.9 - 7)
  ctx.lineTo(width * 0.42 - 3 - 2, height * 0.83)
  ctx.moveTo(width * 0.42 - 3 - 2, height * 0.7)
  ctx.lineTo(width * 0.42 - 3 - 2, height * 0.25 - 5)
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  c1AirPumpStyle.border = '2px solid white'
  c1AirPumpStyle.borderRadius = '1px'
}

const drawC1AirPump = (ctx) => {
  if (c1AirPumpRun) {
    startC1AirPump(ctx)
  } else {
    stopC1AirPump(ctx)
  }
}

const startC2AirPump = (ctx) => {
  ctx.beginPath()
  ctx.arc(width * 0.52 + 5, height * 0.9 - 10, 10, 1 * PI, 0, true)
  ctx.fillStyle = 'rgb(8, 255, 66)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.52, height * 0.9 - 10)
  ctx.lineTo(width * 0.52, height * 0.25)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  c2AirPumpStyle.border = '4px solid rgb(8, 255, 66)'
  c2AirPumpStyle.borderRadius = '2px'
  store.dispatch('hyd/increaseCPress')
}

const stopC2AirPump = (ctx) => {
  ctx.beginPath()
  ctx.arc(width * 0.52, height * 0.9 - 7, 2, 1 * PI, 0, true)
  ctx.fillStyle = c1AirPump.value == 'ON' || c1AirPumpRun ? 'rgb(8, 255, 66)' : 'rgb(255, 255, 255)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.52 + 0.5, height * 0.9 - 7)
  ctx.lineTo(width * 0.52 + 0.5, height * 0.9 - 10)
  ctx.strokeStyle =
    c1AirPump.value == 'ON' || c1AirPumpRun ? 'rgb(8, 255, 66)' : 'rgb(255, 255, 255)'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.52 + 0.5, height * 0.9 - 10)
  ctx.lineTo(width * 0.52 + 0.5, height * 0.83)
  ctx.moveTo(width * 0.52 + 0.5, height * 0.7)
  ctx.lineTo(width * 0.52 + 0.5, height * 0.25 - 5)
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  c2AirPumpStyle.border = '2px solid white'
  c2AirPumpStyle.borderRadius = '1px'
}

const drawC2AirPump = (ctx) => {
  if (c2AirPumpRun) {
    startC2AirPump(ctx)
  } else {
    stopC2AirPump(ctx)
  }
}

const stopRatPump = (ctx) => {
  ctx.beginPath()
  ctx.moveTo(c2ElecPump.value ? width * 0.62 + 9 : width * 0.62 + 4, height * 0.9 - 6)
  ctx.lineTo(width * 0.7 + 5, height * 0.9 - 6)
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.7 + 4, height * 0.9 - 7, 2, 1 * PI, 0, true)
  ctx.fillStyle = 'rgb(255, 255, 255)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.7 + 5, height * 0.9 - 7)
  ctx.lineTo(width * 0.7 + 5, height * 0.63)
  ctx.moveTo(width * 0.7 + 5, height * 0.5)
  ctx.lineTo(width * 0.7 + 5, height * 0.25 - 5)
  ctx.strokeStyle = 'rgb(255, 255, 255)'
  ctx.lineWidth = 2
  ctx.stroke()
  ctx.closePath()
  ratPumpStyle.border = '2px solid white'
  ratPumpStyle.borderRadius = '1px'
}

const startRatPump = (ctx) => {
  ctx.beginPath()
  ctx.arc(width * 0.56 + 5, height * 0.9, 10, PI, 0, false)
  ctx.fillStyle = 'rgb(8, 255, 66)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.56 + 5, height * 0.9 - 5)
  ctx.lineTo(width * 0.7, height * 0.9 - 5)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ctx.beginPath()
  ctx.arc(width * 0.7, height * 0.9 - 10, 10, PI, 0, true)
  ctx.fillStyle = 'rgb(8, 255, 66)'
  ctx.fill()
  ctx.closePath()
  ctx.beginPath()
  ctx.moveTo(width * 0.7 + 5, height * 0.9 - 10)
  ctx.lineTo(width * 0.7 + 5, height * 0.25)
  ctx.strokeStyle = 'rgb(8, 255, 66)'
  ctx.lineWidth = 10
  ctx.stroke()
  ctx.closePath()
  ratPumpStyle.border = '4px solid rgb(8, 255, 66)'
  ratPumpStyle.borderRadius = '2px'
  store.dispatch('hyd/increaseCPress')
}

const drawRatPump = (ctx) => {
  if (ratPump.value) {
    if (ratPumpRun) {
      startRatPump(ctx)
    } else {
      stopRatPump(ctx)
      ctx.beginPath()
      ctx.moveTo(width * 0.734, height * 0.505)
      ctx.lineTo(width * 0.681, height * 0.63)
      ctx.moveTo(width * 0.681, height * 0.505)
      ctx.lineTo(width * 0.734, height * 0.63)
      ctx.strokeStyle = 'rgb(255, 198, 41)'
      ctx.lineWidth = 2
      ctx.stroke()
      ctx.closePath()
      ratPumpStyle.border = '2px solid rgb(255, 198, 41)'
      ratPumpStyle.borderRadius = '1px'
    }
  } else {
    stopRatPump(ctx)
  }
}

const drawCenterSystem = (ctx) => {
  if (
    c2ElecPump.value ||
    c1AirPump.value == 'ON' ||
    c2AirPump.value == 'ON' ||
    c1AirPumpRun ||
    c2AirPumpRun ||
    (ratPumpRun && ratPump.value)
  ) {
    //画C2 elec和c1 air 和 c2 air 的公共线和rat的公共线
    ctx.beginPath()
    ctx.moveTo(width * 0.56, height * 0.9)
    ctx.lineTo(width * 0.56, height * 1)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
  } else {
    //画C1 elec和c1 air 和 c2 air 的公共线
    ctx.beginPath()
    ctx.moveTo(width * 0.56, height * 0.9 - 5)
    ctx.lineTo(width * 0.56, height * 1)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
    store.dispatch('hyd/decreaseCPress')
  }

  if (c1AirPump.value == 'ON' || c2AirPump.value == 'ON' || c1AirPumpRun || c2AirPumpRun) {
    //画c1 air 和 c2 air 的公共线
    ctx.beginPath()
    ctx.arc(width * 0.56 - 5, height * 0.9, 10, PI, 0, false)
    ctx.fillStyle = 'rgb(8, 255, 66)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.56 - 5, height * 0.9 - 5)
    ctx.lineTo(width * 0.52 + 5, height * 0.9 - 5)
    ctx.strokeStyle = 'rgb(8, 255, 66)'
    ctx.lineWidth = 10
    ctx.stroke()
    ctx.closePath()
  } else {
    //画c1 air 和 c2 air 的公共线
    ctx.beginPath()
    ctx.beginPath()
    ctx.arc(width * 0.56 - 1, height * 0.9 - 5, 2, 0, PI, true)
    ctx.fillStyle = 'rgb(255, 255, 255)'
    ctx.fill()
    ctx.closePath()
    ctx.beginPath()
    ctx.moveTo(width * 0.56 - 1, height * 0.9 - 6)
    ctx.lineTo(width * 0.52, height * 0.9 - 6)
    ctx.strokeStyle = 'rgb(255, 255, 255)'
    ctx.lineWidth = 2
    ctx.stroke()
    ctx.closePath()
  }
  drawC1ElecPump(ctx)
  drawC1AirPump(ctx)
  drawC2AirPump(ctx)
  drawC2ElecPump(ctx)
  drawRatPump(ctx)
}
</script>

<style scoped>
.hyd_container {
  height: 591px;
  width: 634px;
  position: relative;
  z-index: 10;
}
.top {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  height: 110px;
  width: 95%;
}
.sub-box {
  display: flex;
  flex-direction: column;
  justify-content: end;
  flex-basis: 0; /* 添加这行，确保所有 sub-box 具有相同的基础宽度 */
  flex-grow: 1; /* 这里flex-grow: 1表示这个元素将会占据剩余的可用空间 */
  margin: 2px;
}

.lower {
  height: 300px;
  width: 634px;
  top: 110px; /* top div的高度 */
  left: 0;
  display: flex;
}

.center {
  width: 380px;
}

.center_0 {
  height: 100px;
  width: 380px;
  display: flex;
}

.center_1 {
  margin-top: -100px;
  height: 60%;
  width: 380px;
  display: flex;
}

.pump_disc {
  margin-top: 90px;
  margin-left: 10px;
}

.pump_disc2 {
  margin-left: 10px;
  margin-top: 30px;
}

.pump_disc_item1,
.pump_disc_item2 {
  font-family: 'Arial', sans-serif;
  display: block;
  color: rgb(8, 214, 255);
  font-weight: 600;
  font-size: 14px;
  margin-top: -10px;
}

.pump_disc_item1 {
  text-align: center;
}

.center_2 {
  height: 40%;
  width: 380px;
  display: flex;
}

.right {
  width: 120px;
}

.boxItem {
  width: 36px;
  height: 40px;
}

.disc_font {
  width: 50px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
canvas {
  position: absolute;
  top: 110px;
  left: 0;
  z-index: 2;
}
.sov {
  width: 28px;
  height: 28px;
}
</style>
